<template>
  <view class="team-content">
    <view class="team-title">
        <view class="tip">
        团队指导
        </view>
        <view @click="toComplaint" class="getme">
            <fui-icon size="34" name="edit"></fui-icon>  我要投诉
        </view>
    </view>

    <view class="team-body">
       <view> <image src="https://img13.360buyimg.com/ddimg/jfs/t1/174899/21/26635/2101/62d505f0Ec630ea99/57cb4eb730f8271e.png" />
         <fui-avatar width="80" src="/static/h5/logo.svg" background="#000"></fui-avatar><text>潮玩君-官方客服</text>
        </view>
       <view  @click="customer" class="to-me">联系Ta</view>
    </view>
    <view class="items">
         <view @click="item.fun" v-for="item in dataList" :key="item.text"><fui-icon size="34" :name="item.icon"></fui-icon>{{item.text}}</view>
    </view>

    <fui-landscape :show="show" maskClosable @close="closePopup">
        <view class="landscape">
                <view class="q-content">
                    <img :src="codeData.bindingCode">
                </view>

               <view class="ui-but"> <fui-button  type="purple" btnSize="small" radius="96rpx">长按保存图片</fui-button></view>
        </view>
    </fui-landscape>

    <fui-landscape :show="customerShow" maskClosable @close="customerShow=false">
        <view @longpress="handleLongPress" class="customer-landscape">
            <img src="https://dmn000001-1301065476.cos.ap-guangzhou.myqcloud.com/opt/test/upFiles/QR/1711503841146_1711503841163.png">

               <view class="ui-but">长按保存图片</view>
        </view>
    </fui-landscape>

  </view>

</template>

<script setup lang="ts">

import dyUserCodeService from "@/api/dyUserCodeService";
const show = ref(false)
const customerShow = ref(false)
const codeData = ref({
    code:"",
    bindingCode:""
})
 const funs = async ()=>{
    uni.showLoading()
    try{
        const {success,result} = await dyUserCodeService.getBindingCode()
        if(success){
            codeData.value =  result
            show.value =true
            uni.hideLoading()
        }
    }catch(e:any){
        uni.showToast({
            title: "出错了",
            duration: 2000,
            icon:"none"
        })
        uni.hideLoading()
    }
}
const toCollege = ()=>{
    console.log(11)
    uni.navigateTo({
        url:'/subPackages_user/college/college'
    })
}

const customer = ()=>{
    customerShow.value = true
}   

const closePopup = ()=>{
    show.value =false
}

const dataList = ref([
    {
        text:'新手学院',
        icon:"classify",
        fun:toCollege
    },
    {
        text:'平台客服',
        icon:"comment",
        fun:customer
    },
    {
        text:'邀请好友',
        icon:"share",
        fun:funs
    },

])

const handleLongPress = ()=>{
        // uni.downloadFile({
    //       url:"https://pic1.zhimg.com/v2-ee3bda5d681789747d00ebb20c49b4bc_r.jpg",
    //       success: res => {
    //         uni.saveImageToPhotosAlbum({
    //           filePath: res.tempFilePath,
    //           success: () => console.log,
    //           fail: () => reject(false),
    //         })
    //       },
    //       fail: () => reject(false),
    //     })

    document.addEventListener('plusready',function () {  
        // 在这里调用plus api  

        let url = "https://pic1.zhimg.com/v2-ee3bda5d681789747d00ebb20c49b4bc_r.jpg";
        let fileName = "未命名.jpg"
        if (!fileName) fileName = '未命名;.jpg'
        if (url) {
            let dtask = plus.downloader.createDownload(url, {
                filename: '_downloads/' + fileName
            }, (d, status) => {
                if (status === 200) { 
                    console.log('下载成功：' + d.filename);
                    // 需要转换成绝对路径
                    let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename); 
                    plusSaveImg(fileSaveUrl);
                } else {
                    uni.showToast({
                        title: '图片保存失败',
                        duration: 2000,
                        icon:"error"
                    });
                }
            });
        //  dtask.setRequestHeader('token', token);
            dtask.start();
        }


    },false);

    // let url = "https://pic1.zhimg.com/v2-ee3bda5d681789747d00ebb20c49b4bc_r.jpg";
    // let fileName = "未命名.jpg"
	// if (!fileName) fileName = '未命名;.jpg'
    // if (url) {
    //     let dtask = plus.downloader.createDownload(url, {
    //         filename: '_downloads/' + fileName
    //     }, (d, status) => {
    //         if (status === 200) { 
    //             console.log('下载成功：' + d.filename);
    //             // 需要转换成绝对路径
    //             let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename); 
    //             plusSaveImg(fileSaveUrl);
    //         } else {
    //             uni.showToast({
    //                 title: '图片保存失败',
    //                 duration: 2000,
    //                 icon:"error"
    //             });
    //         }
    //     });
    //   //  dtask.setRequestHeader('token', token);
    //     dtask.start();
    // }
}

const plusSaveImg = (filename:string)=> {
    plus.gallery.save(filename, () => {
        console.log(filename);
        uni.showToast({
            title: '已保存到系统相册',
            duration: 2000,
            icon:"none"
        });
    
    }, e => {
        uni.showToast({
            title: '图片保存失败',
            duration: 2000,
            icon:"error"
        });
        console.log(e.message);
    });
}


const toComplaint = ()=>{
    uni.navigateTo({
        url:"/subPackages_user/complaint/complaint"
    })
}

</script>

<style lang="scss" scoped>
.team-content{
    margin: 20rpx;
    padding:20rpx;
    background-color: white;
    border-radius: 20rpx;
    .team-title{
        display: flex;
        justify-content: space-between;

        .tip{
            font-weight: bolder;

        }
        .getme{
            font-size: 23rpx;
            padding: 3rpx 25rpx;
            background: rgb(241,240,255);
            border-radius: 20rpx;
        }
    }
    .team-body{
        background: rgb(245,245,255);
        height: 120rpx;
        border-radius: 10rpx;
        margin-top: 20rpx;
        display: flex;
        align-items: center;
        padding:0 20rpx;
        justify-content: space-between;
        image{
            height: 100rpx;
            width: 100rpx;
            margin-left: -15rpx;
            margin-top: -15rpx;
        }
        
        view{
            display: flex;
            align-items: center;
            font-size: 30rpx;
            font-weight: bold;
            color: rgb(60,63,113);
            text{
                margin-left: 12rpx;
            }
        }
        .to-me{
          padding: 5rpx 28rpx;
          display: flex;
          background: rgb(81,82,121);
          align-items: center;
          color: white;
          border-radius: 30rpx;  
        }
    }
    .items{
        display: flex;
        justify-content: space-between;
        font-size: 27rpx;
        align-items: center;
        margin-top: 20rpx;
    }
}
.landscape{
    width: 500rpx;
    height: 850rpx;
    border-radius: 20rpx;
    background-image: url(https://pic1.zhimg.com/v2-ee3bda5d681789747d00ebb20c49b4bc_r.jpg);
    background-size: 100% 100%;
    .q-content{
        height: 120rpx;
        width: 90%;
        background: rgb(254,246,213);
        border-radius: 5rpx;
        margin: 0 auto;
        position: relative;
        top: 60%;
        img{
            width: 150rpx;
            height: 150rpx;
            position: relative;
            top: -15rpx;
            left: 80rpx;
        }
    }
    .ui-but{
        display: flex;
        justify-content: center;
        margin-top: 600rpx;
        
    }
}

.customer-landscape{
    width: 550rpx;
    height: 570rpx;
    border-radius: 20rpx;
    background-image: url(https://img2.baidu.com/it/u=1488300408,909046407&fm=253&fmt=auto?w=500&h=500);
    background-size: 100% 100%;
  
        img{
            width: 400rpx;
            height: 400rpx;
            position: relative;
            top: 75rpx;
            left: 75rpx;
        }
    
    .ui-but{
        display: flex;
        justify-content: center;
        margin-top: 90rpx;
        color: white;
        font-size: 28rpx;
    }
}
</style>
